<template>
  <div class="Box">
    <TopNav />
    <div class="navTopZw"></div>
    <div class="flCExBox">
      <div class="flCBox">
        <ul class="flLBox">
          <li
            v-for="(v, k) in flArr"
            v-bind:key="k + '分类'"
            class="flLitem"
            @click="setFlLitemStyle(k)"
          >
            <a :to="v.router" class="flLitemText" :class="{ flLitemTextOn: v.falg }">
              {{ v.value }}
            </a>
          </li>
        </ul>
        <div class="flRBox">
          <FlTabContentIndex v-if="flArr[0].falg" />
          <FlTabContent2 v-if="flArr[1].falg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "../TopNav/TopNav";
import FlTabContentIndex from "../Fl/FlTabContent/FlTabContentIndex";
import FlTabContent2 from "../Fl/FlTabContent/FlTabContent2";

export default {
  name: "Fl",
  data() {
    return {
      flArr: [
        {
          value: "为您推荐",
          falg: true,
          router: "/",
        },
        {
          value: "面部护理",
          falg: false,
          router: "/2",
        },
        {
          value: "底妆彩妆",
          falg: false,
          router: "/3",
        },
        {
          value: "休闲零食",
          falg: false,
          router: "/4",
        },
        {
          value: "休闲零食",
          falg: false,
          router: "/5",
        },
        {
          value: "美容美发",
          falg: false,
          router: "/6",
        },
        {
          value: "生活用品",
          falg: false,
          router: "/7",
        },
        {
          value: "个人护理",
          falg: false,
          router: "/8",
        },
        {
          value: "保健养生",
          falg: false,
          router: "/9",
        },
        {
          value: "保健养生",
          falg: false,
          router: "/10",
        },
        {
          value: "母婴用品",
          falg: false,
          router: "/11",
        },
      ],
      FlIconArr: [
        {
          imgUrl: require("../../../../assets/zfc-img/icon/日icon图标.png"),
          text: "日本直邮",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/icon/美icon图标.png"),
          text: "美国直邮",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/icon/英icon图标.png"),
          text: "英国直邮",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/icon/澳icon图标.png"),
          text: "澳大利亚直邮",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/icon/中icon图标.png"),
          text: "中国直邮",
          falg: false,
        },
      ],
      flBPlBoxImgArr: [
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/洁面护理.png"),
          text: "洁面护理",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/人气口红.png"),
          text: "人气口红",
          falg: false,
        },
        {
          imgUrl: require("../../../../assets/zfc-img/plImg/名牌包包.png"),
          text: "名牌包包",
          falg: false,
        },
      ],
    };
  },
  methods: {
    setFlLitemStyle(k) {
      this.flArr.forEach((v) => {
        v.falg = false;
      });
      this.flArr[k].falg = true;
    },
  },
  components: { TopNav, FlTabContentIndex, FlTabContent2 },
};
</script>

<style scoped>
* {
  font-size: 0;
  overflow: hidden;
}
.Box {
  /* width: 7.2rem; */
  width: 100%;
}
.navTopZw {
  padding-top: 0.96rem;
}
.flCExBox {
  width: 100%;
}
.flCBox {
  display: flex;
}
/* 左侧分类列表 */
.flLBox {
  width: 1.79rem;
}
.flLitem {
  width: 1.79rem;
  height: 0.8rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  justify-self: center;
  align-items: center;
}
.flLitemText {
  width: calc(100% - 0.02rem);
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.3rem;
  color: #4d4d4d;
  text-align: center;
  text-decoration: none;
  border-right: 0.02rem solid #ffffff;
}
.flLitemTextOn {
  border-right: 0.02rem solid #e53e42;
  color: #e83d41;
}
/* 右侧分类内容 */
.flRBox {
  width: calc(100% - 1.8rem);
  border-left: 0.01rem solid #cccccc;
}
</style>
